<template lang="pug">
    div
        FiltersTable(
            :BreadcrumbList="BreadcrumbList"
            :filters="filters"
            :filterList="filterList"
            :TableDataList="TableList"
            :ColumnsList="TableColumns"
            @listenHandleClickFilterSearch="HandleClickFilterSearch"
        )
</template>

<script>
    import FiltersTable from '@/components/filter-table/index'
    import {getReplyList} from '@/service/reply'
    import {TableColumns, filterList, BreadcrumbList} from './list'

    export default {
        data() {
            return {
                filterList,
                filters: filterList.reduce((obj, item) => {
                    if (item.type !== 'button') {
                        obj[item.key] = ''
                    }
                    return obj
                }, {}),
                TableList: [],
                TableColumns,
                BreadcrumbList
            }
        },
        components: {
            FiltersTable
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.getParamTableDataList()
            },
            async getParamTableDataList() {
                const params = Object.assign({}, {
                }, this.filters)
                const {data: res} = await getReplyList(params)
                this.TableList = res
            },
            HandleClickFilterSearch(buttonKey) {
                if (buttonKey === 'search') {
                    this.getParamTableDataList()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        font-size: 30px;

        .seach {
            color: #999;
            font-size: 12px;
            padding: 0 5px;
        }

        .card {
            margin: 20px 0;
        }

        .pageorg {
            padding: 30px 0 10px;
        }
    }

</style>